<PageHeader as |p|>
  <p.top>
    <div class="breadcrumb">
      <LinkTo @route="vault.cluster.policies" @model={{policyType}} data-test-policy-list-link={{true}}>
        <span class="sep">&#x0002f;</span>
        {{uppercase policyType}} Policies
      </LinkTo>
    </div>
  </p.top>
  <p.levelLeft>
    <h1 class="title is-3">
      Create {{uppercase policyType}} policy
    </h1>
  </p.levelLeft>
</PageHeader>

<form {{ action "savePolicy" model on="submit"}}>
  <div class="box is-bottomless is-fullwidth is-marginless">
    <MessageError @model={{model}} />
    <NamespaceReminder @mode="create" @noun="policy" />
    <div class="field">
      <label for="policy-name" class="is-label">Name</label>
      <div class="control">
        <input
         type="text"
         id="policy-name"
         class="input"
         value={{model.name}}
         oninput={{action "setModelName" model}}
         data-test-policy-input="name"
         />
      </div>
    </div>
    <div class="field">
      <Toolbar>
        <label class="is-label">Policy</label>
        <ToolbarActions>
          <div class="toolbar-separator"></div>
            <div class="control is-flex">
                  <Input @id="fileUploadToggle" @type="checkbox" @name="fileUploadToggle" class="switch is-rounded is-success is-small" @checked={{showFileUpload}} @change={{toggle-action "showFileUpload" this}} data-test-policy-edit-toggle={{true}} />
                  <label for="fileUploadToggle">Upload file</label>
            </div>
          </ToolbarActions>
        </Toolbar>
      {{#if showFileUpload}}
        <TextFile @inputOnly={{true}} @file={{file}} @onChange={{action "setPolicyFromFile"}} />
      {{else}}
        <JsonEditor
          @title="Policy"
          @helpText="You can use Alt+Tab (Option+Tab on MacOS) in the code editor to skip to the next field"
          @showToolbar={{false}}
          @value={{model.policy}}
          @valueUpdated={{action (mut model.policy)}} 
          @options={{hash
            mode='ruby'
            extraKeys=(hash
              Shift-Enter=(action "savePolicy" model)
            )
          }}>
          </JsonEditor>
      {{/if}}
    </div>
    {{#each model.additionalAttrs as |attr|}}
      {{form-field data-test-field attr=attr model=model}}
    {{/each}}
  </div>
  <div class="field is-grouped box is-fullwidth is-bottomless">
    <div class="control">
      <button
        type="submit"
        disabled={{buttonDisabled}}
        class="button is-primary"
        data-test-policy-save=true
      >
        Create policy
      </button>
    </div>
    <div class="control">
      <LinkTo @route="vault.cluster.policies" @replace={{true}} class="button">
        Cancel
      </LinkTo>
    </div>
  </div>
</form>
